@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    color-scheme: light dark;
    color: #fff;
    /*background-color: transparent;*/
    font-family: "NotoSansSC-Regular", sans-serif;
    -webkit-font-smoothing: antialiased; /*chrome、safari*/
    -moz-osx-font-smoothing: grayscale; /*firefox*/
    font-size: 14px;
}

@font-face {
    font-family: "NotoSansSC-Regular";
    font-style: normal;
    font-display: swap;
    src: url("/fonts/NotoSansSC-Regular.woff2") format("woff2");
}

.title-bar {
    -webkit-user-select: none;
    -webkit-app-region: drag;
    background: rgba(255, 255, 255, 0.1);
}

.title-bar,
.footer {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

html,
body {
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
    background-image: linear-gradient(130deg, #575cad7a 0%, #ffffff00 100%);
    user-select: none;
    overflow: hidden;
}

.v-lazy-component.v-lazy-component--loading {
  filter: blur(20px);
}

.v-lazy-component.v-lazy-component--loaded {
  filter: blur(0);
  transition: filter 0.2s;
}
